<template>
        <div>
              <div class="form-group">
                <label>用户名：</label>
                <input type="text" v-model="vname">
              </div>  
              <div class="form-group">
                <label>评论内容：</label>
                <textarea type="text" v-model="vcontext"></textarea>
              </div>  
              <button type="button" @click="addFun" :disabled="visLoading">添加</button>
        </div>
</template>
<script setup lang="ts">

import {ref,defineEmits} from 'vue';
import {useCustomStroe} from '@/stores/commentStore'
import axios from 'axios'
const {addComment} = useCustomStroe();
// console.log('addComment', addComment);

const vname = ref<string>('');
const vcontext = ref<string>('');
const visLoading = ref<boolean>(false);
// 注册 向父组件发添加评论的消息
const emit = defineEmits(['addComment'])

// 添加评论
const addFun = async() => {
        const {value:name} = vname;
        const {value:context} = vcontext;

        if (!name || !context) {
                alert('用户名和内容不能为空！')
                return
        }
        // if(visLoading) return
        visLoading.value = true;
        // 整合数据 
        const obj = {name, context}
        const str = checkSensitive(context);
        if (str) {
                alert('有敏感词'+str)
                visLoading.value = false;
                return
        }
        const res = await sentData(obj).catch(err=>err);
        /** 
        // 请求模拟网络接口
        const res = await sentData(obj).catch(err=>err);
        //   console.log('res1', res);
        visLoading.value = false;

        const {sucss,msg} = res?.data || {};
        if(!sucss) {
                // alert(msg)
                return
        }else{
                console.log('评论添加成功！！')
        }*/
  
        // 给父组件发送传参消息
        //    emit('addComment', obj);
        // pinia 状态管理 actions 定义方法
       addComment(obj);

   // 清空输入框内容
   vname.value = ''
   vcontext.value = ''
}
// 检测敏感词
const checkSensitive = (context:string)=> {
        const arr = ['敏感1','敏感2','敏感3','敏感4'];
        for(let i=0;i<=arr.length;i++){
               const isb =  context.includes(arr[i]);
               if (isb) {
                return arr[i]
                break;
               }
        }
        return ''  
}
// 发送网络请求
const sentData = (data)=>{
        // return new Promise<any>((resolve,reject)=>{
        //         // 模拟 网络请求
        //         fetch('http://cloudclass-static.oss-cn-beijing.aliyuncs.com/static/zhiyinlou/test/img/before-class.7e2b28c7.jpg').then(res=>{
        //                 const {status} = res;
        //                 if (status === 404) {
        //                         setTimeout(() => {
        //                                 reject({sucss:false, msg:'失败了'})
        //                         }, 500);
        //                         return
        //                 }
        //                 setTimeout(() => {
        //                         resolve({sucss:true, msg:'成功了'})
        //                 }, 500);
        //         }).catch(err=>err)
        // })


        const {name, context} = data;

        /**接口地址api/getMapData 请求返回mock数据 */
        return  axios({
                method: 'get',
                url: '/api/getMapData',
           })

        /**接口地址带 mockApi 字段 请求会走proxy代理 */
        /*return axios({
                method: 'get',
                url: '/proxyApi/getdata',
           })*/
}

</script>
<style lang="scss">
.form-group {
        width: 100px;
        height: 50px;
        border: 1px solid red;
}
</style>